<template>
  <el-col :xs="0" :sm="12" :md="12" :lg="12" :xl="12">
    <div class="song">
      <div>
        <img id="play" class="picUrl autoRotate Rotate" :src="picUrl" />

        <img
          id="play"
          class="cd autoRotate Rotate"
          src="../../assets/img/disc.png"
        />
      </div>

      <img id="play" class="tool" src="../../assets/img/player_bar.png" />
    </div>
  </el-col>
</template>

<script>
import { mapState } from "vuex";
import api from "../../api";

export default {
  name: "SongImg",
  data() {
    return {
      picUrl: "",
    };
  },

  computed: {
    ...mapState({
      songId: (state) => state.user.clickSongId,
    }),
  },

  watch: {
    songId: {
      immediate: true,
      handler(newId) {
        const songImg = api.reqGetSongImg(newId);
        songImg.then((songImg) => (this.picUrl = songImg));
      },
    },
  },
};
</script>

<style scoped lang="less">
.el-col {
  height: 600px;

  .song {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
    position: relative;

    div {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 100%;
    }

    img {
      position: absolute;
    }

    .picUrl {
      top: 120px;
      width: 150px;
      height: 150px;
    }

    .cd {
      top: 65px;
      width: 250px;
      height: 250px;
      // width: 50%;
    }

    .tool {
      top: -15px;
      width: 92px;
      height: 128px;
    }

    // 用来控制动画开始播放 权限必须高
    #play {
      animation-play-state: running;
    }

    /* 旋转的动画 */
    @keyframes Rotate {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(360deg);
      }
    }

    /*旋转动画*/
    .autoRotate {
      animation-name: Rotate;
      /*动画名称*/
      animation-iteration-count: infinite;
      /*动画播放次数  infinite无限循环*/
      animation-play-state: paused;
      /*动画状态 暂停*/
      animation-timing-function: linear;
      /*animation-timing-function*/
      animation-duration: 5s;
      /*动画完成时间*/
    }
  }
}
</style>